<!--
 * @Author: 凉月 1931226988@qq.com
 * @Date: 2023-08-22 09:55:51
 * @LastEditors: 凉月 1931226988@qq.com
 * @LastEditTime: 2023-08-24 09:45:19
 * @FilePath: \v3_mobile\src\views\rank\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="rank">
    <HeaderTop></HeaderTop>
    <HeaderScroll :data="topMenu" @changeIndex="changeTopScroll"></HeaderScroll>
    <div class="center">
      <div class="center_left">
        <ul
          ref="leftScroll"
          @touchmove="leftBarMove"
          @touchstart="leftBarStart"
          @touchend="leftBarEnd"
        >
          <li
            v-for="(item, index) in sceneInfo?.tabLists[rankIndex].tabWraps"
            :key="index"
            :class="{ active: index == leftBarIndex }"
            @click="changeLeftBar(index, item.rankingId)"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
      <div class="center_right">
        <div
          class="center_right_scroll"
          ref="rightScroll"
          @touchmove="rightBarMove"
          @touchstart="rightBarStart"
          @touchend="rightBarEnd"
        >
          <RankItem
            v-for="(item, index) in rankingInfo.rankList[0]?.albums || 0"
            :key="index"
            :data="item"
            @click="goDetail(item)"
          >
            <img
              v-if="index == 0"
              style="width: 20px"
              src="https://s1.xmcdn.com/yx/ximalaya-mobile-resource/last/dist/images/img_rank_first_4dd5bad.png"
              alt=""
            />
            <img
              v-if="index == 1"
              style="width: 20px"
              src="https://s1.xmcdn.com/yx/ximalaya-mobile-resource/last/dist/images/img_rank_second_977bd19.png"
              alt=""
            />
            <img
              v-if="index == 2"
              style="width: 20px"
              src="https://s1.xmcdn.com/yx/ximalaya-mobile-resource/last/dist/images/img_rank_third_1a96b0c.png"
              alt=""
            />
            {{ index >= 3 ? index + 1 : "" }}
          </RankItem>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, nextTick } from "vue";
import RankItem from "@/views/rank/rankItem/index";
import HeaderTop from "@/components/headerTop/index";
import HeaderScroll from "@/components/headerScroll/index";
import { reqRankMenu, reqRankData } from "@/api/rank/index";
import router from "@/router";
// 导入类型
import type { menuType, menuData } from "@/api/rank/type/index";

defineOptions({
  name: "Rank",
});

// 一级菜单id
const sceneId = ref<number>(1);
// 二级菜单id
const rankingId = ref<number>(100150);
// 二级菜单索引控制
const rankIndex = ref<number>(0);

// 一二级菜单数据
const sceneInfo = ref<menuData>();
// 二级分类展示数据
const rankingInfo = ref<any>({
  rankList: [],
});

// 顶部菜单数据收集
const topMenu = ref<any>({
  arr: [],
});

const leftBarIndex = ref(0);

const leftScroll = ref<any>();
const startY = ref<number>(0);
const moveY = ref<number>(0);
const allY = ref<any>(0);
const maxY = ref<number>(0);

const rightScroll = ref<any>();
const right_startY = ref<number>(0);
const right_moveY = ref<number>(0);
const right_allY = ref<any>(0);
const right_maxY = ref<number>(0);

//开始时的位置

// 回调函数区域
const changeLeftBar = (index: number, id: number) => {
  leftBarIndex.value = index;
  rankingId.value = id;
  // 重置右侧滚动
  nextTick(() => {
    rightScroll.value.style.top = 0 + "px";
    right_allY.value = 0;
  });
};

// left触发-----------------------
const leftBarMove = (e: any) => {
  maxY.value = leftScroll.value.clientHeight - e.target.clientHeight * 4;
  // 先获取一共变化的值
  // 计算移动的量
  moveY.value = e.changedTouches[0].clientY - startY.value;
  const changeY = moveY.value + parseInt(allY.value);
  // 判断是否符合范围区域
  if (changeY > -maxY.value && changeY <= 0) {
    // 从新赋值
    leftScroll.value.style.top = changeY + "px";
  }
};
// 按下触发
const leftBarStart = (e: any) => {
  // 需要获得初始值
  startY.value = e.changedTouches[0].clientY;
};
//抬起触发
const leftBarEnd = () => {
  // 需要在这里获取一共移动了多少
  allY.value = leftScroll.value.style.top;
};

//right 触发
const rightBarMove = (e: any) => {
  right_maxY.value = rightScroll.value.clientHeight - e.target.clientHeight * 4;
  // 先获取一共变化的值
  // 计算移动的量
  right_moveY.value = e.changedTouches[0].clientY - right_startY.value;
  const changeY = right_moveY.value + parseInt(right_allY.value);
  // 判断是否符合范围区域
  if (changeY > -right_maxY.value && changeY <= 0) {
    // 从新赋值
    rightScroll.value.style.top = changeY + "px";
  }
};
// 按下触发
const rightBarStart = (e: any) => {
  // 需要获得初始值
  right_startY.value = e.changedTouches[0].clientY;
};
//抬起触发
const rightBarEnd = () => {
  // 需要在这里获取一共移动了多少
  right_allY.value = rightScroll.value.style.top;
};

// 获取一二级菜单数据
const getSceneInfo = async () => {
  const res: menuType = await reqRankMenu(sceneId.value);
  console.log(res);
  if (res.ret == 200) {
    sceneInfo.value = res.data;
    topMenu.value.arr.push(
      ...res.data.tabLists.map((item, index) => {
        return {
          id: item.id,
          title: item.name,
        };
      })
    );
    // 获取第一项 的二级分类id
    rankingId.value = res.data.tabLists[0].tabWraps[0].rankingId;
  }
};

// 获取二级分类展示数据
const getRankingInfo = async () => {
  const res: any = await reqRankData(rankingId.value);
  if (res.ret == 200) {
    rankingInfo.value = res.data;
  }
};

// 获取TopScroll索引
const changeTopScroll = (index: number, id: number) => {
  rankIndex.value = index;
  leftBarIndex.value = 0;
  rankingId.value = sceneInfo.value?.tabLists[index].tabWraps[0]
    .rankingId as number;
};

// 前往详情页
const goDetail = (item:any) => {
  console.log(item)
  router.push({
    name: 'Detail',
    params: {
      id: item.id
    }
  })
}

// 组合式api区域
onMounted(() => {
  getSceneInfo();
});

// 侦听器 在监听到二级分类id变化后从新获取数据
watch(rankingId, () => {
  getRankingInfo();
});
</script>

<style scoped lang="less">
@allColor: #f86442;
.rank {
  height: 100vh;
  display: flex;
  flex-direction: column;
  li {
    list-style-type: none;
  }

  .center {
    flex: 1;
    // border: 1px solid red;
    display: flex;
    .center_left {
      position: relative;
      overflow: auto;
      flex: 1;
      // border: 1px solid green;
      background-color: #f3f4f5;
      height: 100%;
      // overflow: hidden;
      &::-webkit-scrollbar {
        display: none;
      }
      ul {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
      }
      ul li {
        height: 20px;
        line-height: 20px;
        padding: 15px 0;
        text-align: center;
        font-size: 14px;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-bottom: 1px solid #ddd;
        color: #666;
      }
      ul li.active {
        border-left: 4px solid @allColor;
        background-color: #fff;
      }
    }
    .center_right {
      position: relative;
      // overflow: hidden;
      overflow: auto;
      flex: 4;
      &::-webkit-scrollbar {
        display: none;
      }
      .center_right_scroll {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
      }
    }
  }
}
</style>
